<template>
    <div style="padding: 10px">
        <div class="headerBoxList">
            <div v-if="sendData.class == 'phone_images'" style="display: inline-block;display: flex;align-items: center;">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M5 10C5 8.89543 5.89543 8 7 8L41 8C42.1046 8 43 8.89543 43 10V38C43 39.1046 42.1046 40 41 40H7C5.89543 40 5 39.1046 5 38V10Z"
                        stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M14.5 18C15.3284 18 16 17.3284 16 16.5C16 15.6716 15.3284 15 14.5 15C13.6716 15 13 15.6716 13 16.5C13 17.3284 13.6716 18 14.5 18Z"
                        stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M15 24L20 28L26 21L43 34V38C43 39.1046 42.1046 40 41 40H7C5.89543 40 5 39.1046 5 38V34L15 24Z"
                        fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
                </svg>
            </div>
            <div v-else-if="sendData.class == 'phone_downloads'"
                style="display: inline-block;display: flex;align-items: center;">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z"
                        fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
                    <path d="M30 28L23.9933 34L18 28.0134" stroke="#333" stroke-width="4" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path d="M24 20V34" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <div v-else-if="sendData.class == 'phone_file'"
                style="display: inline-block;display: flex;align-items: center;">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M39 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44H39C40.1046 44 41 43.1046 41 42V6C41 4.89543 40.1046 4 39 4Z"
                        fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M17 30L31 30" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M17 36H24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <rect x="17" y="12" width="14" height="10" fill="none" stroke="#333" stroke-width="4"
                        stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <div v-else-if="sendData.class == 'phone_video'"
                style="display: inline-block;display: flex;align-items: center;">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z"
                        stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M20.5 28V21.9378L25.75 24.9689L31 28L25.75 31.0311L20.5 34.0622V28Z" fill="none" stroke="#333"
                        stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M6 15H42" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M33 6L27 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M21 6L15 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <div v-else-if="sendData.class == 'phone_audio'"
                style="display: inline-block;display: flex;align-items: center;">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 44V4H31L40 14.5V44H8Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path d="M32 14L26 16.9688V31.5" stroke="#333" stroke-width="4" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <circle cx="20.5" cy="31.5" r="5.5" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </div>
            <span style="margin-left: 10px">{{ sendData.label }}</span>
        </div>
        <div class="contentBoxYY" ref="customDiv" style="">
            <div v-if="!isShow">
                <div style="width: 100%;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="offset" :page-sizes="[5, 10, 15, 20]" layout="total,  prev, pager, next,->, jumper"
                        :total="total" :hide-on-single-page="true" :small="true" :pager-count="5">
                    </el-pagination>
                </div>
                <el-table :data="list" stripe style="width: 100%;margin-top: 10px;">
                    <el-table-column prop="_display_name" label="展示名称">
                    </el-table-column>
                    <el-table-column label="大小">
                        <template slot-scope="{row}">
                            <span>{{ row._size == 'NULL' ? '无' : change(Number(row._size)) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="更多信息">
                        <template slot-scope="{row}">
                            <el-button type="text" size="small" @click="editHandler(row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <div v-else>
                <el-descriptions title="用户信息" :column="2">
                    <el-descriptions-item label="数据">{{ detailList._data == 'NULL' ? '' : detailList._data
                    }}</el-descriptions-item>
                    <el-descriptions-item label="显示名字">{{ detailList._display_name == 'NULL' ? '' : detailList._display_name
                    }}</el-descriptions-item>
                    <el-descriptions-item label="id">{{ detailList._id == 'NULL' ? '' : detailList._id
                    }}</el-descriptions-item>
                    <el-descriptions-item label="大小">{{ detailList._size == 'NULL' ? '' : detailList._size
                    }}</el-descriptions-item>
                    <el-descriptions-item label="总体显示名字">{{
                        detailList.bucket_display_name == 'NULL' ? '' : detailList.bucket_display_name
                    }}</el-descriptions-item>
                    <el-descriptions-item label="总体id">{{ detailList.bucket_id == 'NULL' ? '' : detailList.bucket_id
                    }}</el-descriptions-item>
                    <el-descriptions-item label="数量">{{ detailList.cnt == 'NULL' ? '' : detailList.cnt
                    }}</el-descriptions-item>
                    <el-descriptions-item label="更多的日期">{{ detailList.date_added == 'NULL' ? '' : detailList.date_added
                    }}</el-descriptions-item>
                    <el-descriptions-item label="日期的有效期">{{ detailList.date_expires == 'NULL' ? '' : detailList.date_expires
                    }}</el-descriptions-item>
                    <el-descriptions-item label="修改的日期">{{ detailList.date_modified == 'NULL' ? '' :
                        detailList.date_modified
                    }}</el-descriptions-item>
                    <el-descriptions-item label="增加的一代">{{
                        detailList.generation_added == 'NULL' ? '' : detailList.generation_added }}</el-descriptions-item>
                    <el-descriptions-item label="修改的一代">{{
                        detailList.generation_modified == 'NULL' ? '' : detailList.generation_modified
                    }}</el-descriptions-item>
                    <el-descriptions-item label="是否下载">{{ detailList.is_download == 'NULL' ? "" : (detailList.is_download ==
                        '1'
                        ? '是' : '否') }}</el-descriptions-item>
                    <el-descriptions-item label="是否drm">{{ detailList.is_drm == 'NULL' ? "" : (detailList.is_drm == '1' ?
                        '是' :
                        '否') }}</el-descriptions-item>
                    <el-descriptions-item label="是否喜欢">{{ detailList.is_favorite == 'NULL' ? "" : (detailList.is_favorite ==
                        '1'
                        ? '是' : '否') }}</el-descriptions-item>
                    <el-descriptions-item label="是否等待">{{ detailList.is_pending == 'NULL' ? "" : (detailList.is_pending ==
                        '1' ?
                        '是' : '否') }}</el-descriptions-item>
                    <el-descriptions-item label="是否回收">{{ detailList.is_trashed == 'NULL' ? "" : (detailList.is_trashed ==
                        '1' ?
                        '是' : '否') }}</el-descriptions-item>
                    <el-descriptions-item :label="$t('wechat.wifiType')">{{ detailList.mime_type == 'NULL' ? '' : detailList.mime_type
                    }}</el-descriptions-item>
                    <el-descriptions-item label="所有包名">{{
                        detailList.owner_package_name == 'NULL' ? '' : detailList.owner_package_name
                    }}</el-descriptions-item>
                    <el-descriptions-item label="基础类型">{{ detailList.phone_base_type == 'NULL' ? '' :
                        detailList.phone_base_type
                    }}</el-descriptions-item>
                    <el-descriptions-item label="相对路径">{{ detailList.relative_path == 'NULL' ? '' : detailList.relative_path
                    }}</el-descriptions-item>
                    <el-descriptions-item label="标题">{{ detailList.title == 'NULL' ? '' : detailList.title
                    }}</el-descriptions-item>
                    <el-descriptions-item label="卷名">{{ detailList.volume_name == 'NULL' ? '' : detailList.volume_name
                    }}</el-descriptions-item>
                </el-descriptions>
                <el-button type="primary" plain size="small" style="float:right;margin-right: 20px;"
                    @click="backHandler">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getPhoneInFoApi } from '@/api/phoneInfo/index'
export default {
    name: 'phoneDetail',
    props: ['sendData'],
    data() {
        return {
            list: [],
            offset: 1,
            limit: 10,
            total: 0,
            isShow: false,
            detailList: [],
        };
    },
    components: {

    },
    created() {
        this.initFunction()
    },
    watch: {
        '$store.state.account.basePhone': function () {
            this.initFunction();
        },
        sendData(newVal, oldVal) {
            this.isShow = false
            this.offset = 1
        },
    },
    computed: {

    },
    methods: {
        //大小转格式
        change(limit) {
            if (limit == 0) return limit;
            var size = "";
            if (limit < 0.1 * 1024) {                            //小于0.1KB，则转化成B
                size = limit.toFixed(2) + "B"
            } else if (limit < 0.1 * 1024 * 1024) {            //小于0.1MB，则转化成KB
                size = (limit / 1024).toFixed(2) + "KB"
            } else if (limit < 0.1 * 1024 * 1024 * 1024) {        //小于0.1GB，则转化成MB
                size = (limit / (1024 * 1024)).toFixed(2) + "MB"
            } else {                                            //其他转化成GB
                size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
            }

            var sizeStr = size + "";                        //转成字符串
            var index = sizeStr.indexOf(".");                    //获取小数点处的索引
            var dou = sizeStr.substr(index + 1, 2)            //获取小数点后两位的值
            if (dou == "00") {                                //判断后两位是否为00，如果是则删除00               
                return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
            }
            return size;
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val
            this.initFunction()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.offset = val
            this.initFunction()
        },
        //点击编辑的回调
        editHandler(row) {
            this.isShow = true
            this.detailList = row
        },
        //返回的回调
        backHandler() {
            this.isShow = false
        },
        //获取初始数据
        initFunction() {
            // console.log(this.sendData);
            let api = '/' + this.sendData.href;
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit
            }
            getPhoneInFoApi(data, api).then(res => {
                this.list = res.data;
                this.total = Number(this.sendData.cnt);
            }).catch(error => {
                console.error(error)
            })
        },
    },
};
</script>

<style lang='scss' scoped>
.headerBoxList {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.contentBoxYY {
    position: relative;
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    height: 88vh;
    overflow-y: auto;
    padding-top: 10px;
}

@media screen and (min-width: 2360px) {
    .contentBoxYY {
        width: 95%;
        margin: 0 auto;
        overflow: hidden;
        height: 82vh;
        overflow-y: auto;
        padding-top: 10px;
    }
}
@media screen and (min-width: 2561px) {
    .contentBoxYY {
        width: 95%;
        margin: 0 auto;
        overflow: hidden;
        height: 67vh;
        overflow-y: auto;
        padding-top: 10px;
    }
}
</style>